<template>
  <a-card
    v-if="marketPrice || comboPrice"
    class="quota fixed z-50 bottom-0 right-0"
    :class="{ 'sider-breakpoint': siderBreakpoint }"
  >
    <div class="quota-wrapper">
      <span class="quota-desc">
        <span v-if="marketPrice">
          市场价：
          <span class="quotaselected">{{ marketPrice }}</span>
        </span>
        <span v-if="comboPrice" style="margin-left: 20px">
          尝鲜价：
          <span class="quota-selected">{{ comboPrice }}</span>
        </span>
      </span>
      <a-button
        type="primary"
        size="large"
        class="ml-5 quota__submit-btn"
        :danger="shouldDisabledSubmit"
        :loading="submitting"
        @click="handleBeforeSubmit"
      >
        {{ submitBtnText }}
      </a-button>
    </div>
  </a-card>
</template>

<script lang="ts" setup>
import { computed, toRefs } from 'vue'
import { isNil } from 'lodash-es'
import { message } from 'ant-design-vue'
import type { PackageData } from '@/services/price-sheet/getPackageList'
import type { PriceKeyword } from '@/core/interfaces/keyword'
import { useMainStore } from '@/store/useMainStore'
import { storeToRefs } from 'pinia'

interface Emits {
  (e: 'submit'): void
  (e: 'before-submit'): void
}

interface Props {
  currentPackage: Partial<PackageData>
  selectedTableData: PriceKeyword[]
  submitting: boolean
  marketPrice?: number
  comboPrice?: number
}

defineOptions({
  name: 'CbFooter'
})

const emit = defineEmits<Emits>()

const mainStore = useMainStore()
const { siderBreakpoint } = storeToRefs(mainStore)

const props = withDefaults(defineProps<Props>(), {
  currentPackage: () => ({}),
  selectedTableData: () => [],
  submitting: false
})

const { currentPackage, selectedTableData } = toRefs(props)

const shouldDisabledSubmit = computed(() => {
  if (currentPackage.value?.wordsNumTotal) {
    return selectedTableData.value.length > currentPackage.value.wordsNumTotal
  }
  return false
})

const numOfAdditions = computed(() => {
  if (isNil(currentPackage.value?.wordsNumTotal)) {
    return selectedTableData.value.length
  } else {
    return currentPackage.value.wordsNumTotal - selectedTableData.value.length
  }
})

const submitBtnText = computed(() => {
  if (selectedTableData.value.length === 0) {
    return '请选择词组'
  } else {
    return '提交审核'
  }
})

async function handleBeforeSubmit() {
  emit('submit')
}
</script>

<style lang="scss" scoped>
.quotaselected {
  font-size: 16px;
  color: #ff4d4f;
  text-decoration: line-through;
}
.quota {
  height: 85px;
  left: 208px;
  padding-right: 38px;
  transition: left 0.2s ease;

  ::v-deep(.ant-card-body) {
    padding: 0;
  }

  &-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 5px;
  }

  &-desc {
    font-size: 16px;
  }

  &-selected {
    vertical-align: sub;
    font-size: 48px;
    font-weight: bold;
    color: #ff4d4f;
  }

  &__submit-btn {
    height: 56px;
    min-width: 134px;
    border-radius: 4px;
    font-size: 20px;
  }
}

.sider-breakpoint {
  left: 48px;
}
</style>
